<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>信用卡还款计算器</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0FC6C2',
            success: '#00B42A',
            warning: '#FF7D00',
            danger: '#F53F3F',
            info: '#86909C',
            light: '#F2F3F5',
            dark: '#1D2129',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 25px -5px rgba(22, 93, 255, 0.1), 0 8px 10px -6px rgba(22, 93, 255, 0.1);
      }
      .input-focus {
        @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
      }
      .btn-hover {
        @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-inter min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="bg-white shadow-md sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-credit-card text-primary text-2xl"></i>
        <h1 class="text-xl font-bold text-dark">信用卡还款计算器</h1>
      </div>
      <div class="hidden md:flex items-center space-x-6">
        <a href="#" class="text-dark hover:text-primary transition-colors duration-300">首页</a>
        <a href="#" class="text-dark hover:text-primary transition-colors duration-300">还款计划</a>
        <a href="#" class="text-dark hover:text-primary transition-colors duration-300">利息计算</a>
        <a href="#" class="text-dark hover:text-primary transition-colors duration-300">帮助</a>
      </div>
      <button class="md:hidden text-dark focus:outline-none">
        <i class="fa fa-bars text-xl"></i>
      </button>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    <div class="max-w-5xl mx-auto">
      <!-- 页面标题 -->
      <div class="text-center mb-10">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">智能信用卡还款规划</h2>
        <p class="text-info text-lg max-w-3xl mx-auto">
          轻松计算您的信用卡还款方案，比较不同还款方式的利息和时间，找到最适合您的财务计划。
        </p>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- 输入表单卡片 -->
        <div class="lg:col-span-1">
          <div class="bg-white rounded-xl p-6 card-shadow transition-all duration-300 hover:shadow-xl">
            <h3 class="text-xl font-bold text-dark mb-6 flex items-center">
              <i class="fa fa-calculator text-primary mr-2"></i>
              还款计算
            </h3>

            <form id="calculatorForm" class="space-y-5">
              <!-- 信用卡余额 -->
              <div class="space-y-2">
                <label for="balance" class="block text-dark font-medium">信用卡余额 (元)</label>
                <div class="relative">
                  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-info">
                    <i class="fa fa-rmb"></i>
                  </span>
                  <input
                    type="number"
                    id="balance"
                    class="w-full pl-10 pr-3 py-3 rounded-lg border border-gray-300 input-focus"
                    placeholder="请输入信用卡欠款金额"
                    value="10000"
                    min="1"
                  >
                </div>
              </div>

              <!-- 年利率 -->
              <div class="space-y-2">
                <label for="apr" class="block text-dark font-medium">年利率 (%)</label>
                <div class="relative">
                  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-info">
                    <i class="fa fa-percent"></i>
                  </span>
                  <input
                    type="number"
                    id="apr"
                    class="w-full pl-10 pr-3 py-3 rounded-lg border border-gray-300 input-focus"
                    placeholder="请输入信用卡年利率"
                    value="18"
                    min="0.1"
                    step="0.1"
                  >
                </div>
              </div>

              <!-- 最低还款比例 -->
              <div class="space-y-2">
                <label for="minPaymentRate" class="block text-dark font-medium">最低还款比例 (%)</label>
                <div class="relative">
                  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-info">
                    <i class="fa fa-percent"></i>
                  </span>
                  <input
                    type="number"
                    id="minPaymentRate"
                    class="w-full pl-10 pr-3 py-3 rounded-lg border border-gray-300 input-focus"
                    placeholder="请输入最低还款比例"
                    value="10"
                    min="1"
                    max="50"
                    step="1"
                  >
                </div>
              </div>

              <!-- 每月还款金额 -->
              <div class="space-y-2">
                <label for="monthlyPayment" class="block text-dark font-medium">每月还款金额 (元)</label>
                <div class="relative">
                  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-info">
                    <i class="fa fa-rmb"></i>
                  </span>
                  <input
                    type="number"
                    id="monthlyPayment"
                    class="w-full pl-10 pr-3 py-3 rounded-lg border border-gray-300 input-focus"
                    placeholder="请输入您计划每月还款金额"
                    value="2000"
                    min="1"
                  >
                </div>
              </div>

              <!-- 还款方式选择 -->
              <div class="space-y-2">
                <label class="block text-dark font-medium">还款方式</label>
                <div class="grid grid-cols-2 gap-3">
                  <div class="relative">
                    <input
                      type="radio"
                      id="minPayment"
                      name="paymentType"
                      class="hidden peer"
                      checked
                    >
                    <label
                      for="minPayment"
                      class="block p-3 border border-gray-300 rounded-lg cursor-pointer text-center peer-checked:border-primary peer-checked:bg-primary/5 transition-all duration-300"
                    >
                      <i class="fa fa-minus-circle text-info mr-1"></i>
                      最低还款
                    </label>
                  </div>
                  <div class="relative">
                    <input
                      type="radio"
                      id="fixedPayment"
                      name="paymentType"
                      class="hidden peer"
                    >
                    <label
                      for="fixedPayment"
                      class="block p-3 border border-gray-300 rounded-lg cursor-pointer text-center peer-checked:border-primary peer-checked:bg-primary/5 transition-all duration-300"
                    >
                      <i class="fa fa-calculator text-info mr-1"></i>
                      固定金额
                    </label>
                  </div>
                </div>
              </div>

              <!-- 计算按钮 -->
              <button
                type="submit"
                class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 btn-hover flex items-center justify-center"
              >
                <i class="fa fa-calculator mr-2"></i>
                计算还款计划
              </button>
            </form>
          </div>
        </div>

        <!-- 结果展示卡片 -->
        <div class="lg:col-span-2 space-y-8">
          <!-- 概览卡片 -->
          <div class="bg-white rounded-xl p-6 card-shadow transition-all duration-300 hover:shadow-xl">
            <h3 class="text-xl font-bold text-dark mb-6 flex items-center">
              <i class="fa fa-bar-chart text-primary mr-2"></i>
              还款概览
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6" id="summaryCards">
              <!-- 总利息 -->
              <div class="bg-gradient-to-br from-primary/5 to-primary/10 rounded-lg p-5">
                <div class="flex justify-between items-start">
                  <div>
                    <p class="text-info text-sm">总利息</p>
                    <h4 class="text-2xl font-bold text-primary mt-1" id="totalInterest">¥1,234.56</h4>
                  </div>
                  <div class="bg-primary/20 rounded-full p-2">
                    <i class="fa fa-money text-primary"></i>
                  </div>
                </div>
                <div class="mt-4">
                  <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-primary h-2 rounded-full" style="width: 45%"></div>
                  </div>
                </div>
              </div>

              <!-- 还款月数 -->
              <div class="bg-gradient-to-br from-secondary/5 to-secondary/10 rounded-lg p-5">
                <div class="flex justify-between items-start">
                  <div>
                    <p class="text-info text-sm">还款月数</p>
                    <h4 class="text-2xl font-bold text-secondary mt-1" id="monthsToPayoff">12 个月</h4>
                  </div>
                  <div class="bg-secondary/20 rounded-full p-2">
                    <i class="fa fa-calendar text-secondary"></i>
                  </div>
                </div>
                <div class="mt-4">
                  <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-secondary h-2 rounded-full" style="width: 60%"></div>
                  </div>
                </div>
              </div>

              <!-- 总还款额 -->
              <div class="bg-gradient-to-br from-warning/5 to-warning/10 rounded-lg p-5">
                <div class="flex justify-between items-start">
                  <div>
                    <p class="text-info text-sm">总还款额</p>
                    <h4 class="text-2xl font-bold text-warning mt-1" id="totalCost">¥11,234.56</h4>
                  </div>
                  <div class="bg-warning/20 rounded-full p-2">
                    <i class="fa fa-credit-card text-warning"></i>
                  </div>
                </div>
                <div class="mt-4">
                  <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-warning h-2 rounded-full" style="width: 75%"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 图表卡片 -->
          <div class="bg-white rounded-xl p-6 card-shadow transition-all duration-300 hover:shadow-xl">
            <h3 class="text-xl font-bold text-dark mb-6 flex items-center">
              <i class="fa fa-line-chart text-primary mr-2"></i>
              还款进度
            </h3>

            <div class="space-y-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center space-x-4">
                  <button class="chart-btn active bg-primary/10 text-primary px-4 py-2 rounded-lg transition-all duration-300">
                    余额
                  </button>
                  <button class="chart-btn bg-gray-100 text-gray-600 px-4 py-2 rounded-lg transition-all duration-300">
                    利息
                  </button>
                  <button class="chart-btn bg-gray-100 text-gray-600 px-4 py-2 rounded-lg transition-all duration-300">
                    本金 vs 利息
                  </button>
                </div>
                <div class="flex items-center space-x-2">
                  <span class="text-sm text-info">显示:</span>
                  <select class="border border-gray-300 rounded-lg px-3 py-2 text-sm input-focus">
                    <option>全部月份</option>
                    <option>前6个月</option>
                    <option>后6个月</option>
                  </select>
                </div>
              </div>

              <div class="h-[300px]">
                <canvas id="paymentChart"></canvas>
              </div>
            </div>
          </div>

          <!-- 还款计划表 -->
          <div class="bg-white rounded-xl p-6 card-shadow transition-all duration-300 hover:shadow-xl">
            <h3 class="text-xl font-bold text-dark mb-6 flex items-center">
              <i class="fa fa-table text-primary mr-2"></i>
              还款明细
            </h3>

            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      月份
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      期初余额
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      还款金额
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      利息
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      本金
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      期末余额
                    </th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200" id="paymentSchedule">
                  <!-- 这里将通过JavaScript动态生成 -->
                </tbody>
              </table>
            </div>

            <div class="mt-6 text-center">
              <button class="text-primary hover:text-primary/80 font-medium transition-colors duration-300">
                <i class="fa fa-download mr-1"></i>
                下载完整还款计划
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 比较工具 -->
      <div class="mt-12 bg-white rounded-xl p-6 card-shadow transition-all duration-300 hover:shadow-xl">
        <h3 class="text-xl font-bold text-dark mb-6 flex items-center">
          <i class="fa fa-exchange text-primary mr-2"></i>
          不同还款方式比较
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <!-- 最低还款 -->
          <div class="border border-gray-200 rounded-lg p-5 hover:border-primary transition-all duration-300">
            <div class="text-center mb-4">
              <div class="bg-primary/10 rounded-full w-16 h-16 flex items-center justify-center mx-auto">
                <i class="fa fa-minus-circle text-primary text-xl"></i>
              </div>
              <h4 class="font-bold text-lg mt-3">最低还款</h4>
              <p class="text-info text-sm">只支付每月最低要求金额</p>
            </div>

            <div class="space-y-3">
              <div class="flex justify-between">
                <span class="text-gray-600">总利息:</span>
                <span class="font-medium">¥3,245.67</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">还款月数:</span>
                <span class="font-medium">36 个月</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">首月还款:</span>
                <span class="font-medium">¥1,000.00</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">次月还款:</span>
                <span class="font-medium">¥982.34</span>
              </div>
            </div>

            <button class="w-full mt-5 bg-primary/10 hover:bg-primary/20 text-primary font-medium py-2 rounded-lg transition-all duration-300">
              使用此方式
            </button>
          </div>

          <!-- 固定金额 -->
          <div class="border border-primary rounded-lg p-5 bg-primary/5 relative">
            <div class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-primary text-white text-xs font-bold px-3 py-1 rounded-full">
              推荐
            </div>
            <div class="text-center mb-4">
              <div class="bg-primary/20 rounded-full w-16 h-16 flex items-center justify-center mx-auto">
                <i class="fa fa-calculator text-primary text-xl"></i>
              </div>
              <h4 class="font-bold text-lg mt-3">固定金额</h4>
              <p class="text-info text-sm">每月支付固定金额</p>
            </div>

            <div class="space-y-3">
              <div class="flex justify-between">
                <span class="text-gray-600">总利息:</span>
                <span class="font-medium">¥1,234.56</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">还款月数:</span>
                <span class="font-medium">12 个月</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">每月还款:</span>
                <span class="font-medium">¥2,000.00</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">节省利息:</span>
                <span class="font-medium text-success">¥2,011.11</span>
              </div>
            </div>

            <button class="w-full mt-5 bg-primary hover:bg-primary/90 text-white font-medium py-2 rounded-lg transition-all duration-300 btn-hover">
              使用此方式
            </button>
          </div>

          <!-- 自定义 -->
          <div class="border border-gray-200 rounded-lg p-5 hover:border-primary transition-all duration-300">
            <div class="text-center mb-4">
              <div class="bg-primary/10 rounded-full w-16 h-16 flex items-center justify-center mx-auto">
                <i class="fa fa-sliders text-primary text-xl"></i>
              </div>
              <h4 class="font-bold text-lg mt-3">自定义计划</h4>
              <p class="text-info text-sm">设置您的还款目标</p>
            </div>

            <div class="space-y-3">
              <div class="flex justify-between">
                <span class="text-gray-600">目标月数:</span>
                <span class="font-medium">18 个月</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">总利息:</span>
                <span class="font-medium">¥1,876.34</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">每月还款:</span>
                <span class="font-medium">¥1,500.00</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">节省利息:</span>
                <span class="font-medium text-success">¥1,369.33</span>
              </div>
            </div>

            <button class="w-full mt-5 bg-primary/10 hover:bg-primary/20 text-primary font-medium py-2 rounded-lg transition-all duration-300">
              设置自定义计划
            </button>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-10 mt-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <i class="fa fa-credit-card text-primary text-2xl"></i>
            <h3 class="text-xl font-bold">信用卡还款计算器</h3>
          </div>
          <p class="text-gray-400">
            帮助您轻松规划信用卡还款，避免高额利息，实现财务自由。
          </p>
        </div>

        <div>
          <h4 class="text-lg font-medium mb-4">功能</h4>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">还款计算</a></li>
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">利息分析</a></li>
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">比较工具</a></li>
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">财务建议</a></li>
          </ul>
        </div>

        <div>
          <h4 class="text-lg font-medium mb-4">资源</h4>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">信用卡指南</a></li>
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">利息知识</a></li>
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">还款策略</a></li>
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">常见问题</a></li>
          </ul>
        </div>

        <div>
          <h4 class="text-lg font-medium mb-4">联系我们</h4>
          <ul class="space-y-2">
            <li class="flex items-center space-x-2">
              <i class="fa fa-envelope text-primary"></i>
              <a href="mailto:support@creditcalc.com" class="text-gray-400 hover:text-primary transition-colors duration-300">support@creditcalc.com</a>
            </li>
            <li class="flex items-center space-x-2">
              <i class="fa fa-phone text-primary"></i>
              <a href="tel:+8612345678901" class="text-gray-400 hover:text-primary transition-colors duration-300">400-123-4567</a>
            </li>
            <li class="flex items-center space-x-2">
              <i class="fa fa-map-marker text-primary"></i>
              <span class="text-gray-400">北京市朝阳区金融中心A座</span>
            </li>
          </ul>
          <div class="flex space-x-4 mt-4">
            <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">
              <i class="fa fa-weixin text-xl"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">
              <i class="fa fa-weibo text-xl"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">
              <i class="fa fa-qq text-xl"></i>
            </a>
          </div>
        </div>
      </div>

      <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
        <p class="text-gray-500">© 2025 信用卡还款计算器. 保留所有权利.</p>
        <div class="flex space-x-6 mt-4 md:mt-0">
          <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-300">隐私政策</a>
          <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-300">服务条款</a>
          <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-300">Cookie政策</a>
        </div>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 等待DOM加载完成
    document.addEventListener('DOMContentLoaded', function() {
      // 获取表单元素
      const calculatorForm = document.getElementById('calculatorForm');
      const balanceInput = document.getElementById('balance');
      const aprInput = document.getElementById('apr');
      const minPaymentRateInput = document.getElementById('minPaymentRate');
      const monthlyPaymentInput = document.getElementById('monthlyPayment');
      const minPaymentRadio = document.getElementById('minPayment');
      const fixedPaymentRadio = document.getElementById('fixedPayment');

      // 获取结果元素
      const totalInterestElement = document.getElementById('totalInterest');
      const monthsToPayoffElement = document.getElementById('monthsToPayoff');
      const totalCostElement = document.getElementById('totalCost');
      const paymentScheduleElement = document.getElementById('paymentSchedule');

      // 图表相关
      let paymentChart;

      // 表单提交事件
      calculatorForm.addEventListener('submit', function(e) {
        e.preventDefault();
        calculatePaymentPlan();
      });

      // 余额输入变化时更新最低还款额
      balanceInput.addEventListener('input', updateMinPayment);
      // 最低还款比例输入变化时更新最低还款额
      minPaymentRateInput.addEventListener('input', updateMinPayment);
      // 还款方式切换事件
      minPaymentRadio.addEventListener('change', function() {
        if (this.checked) {
          monthlyPaymentInput.disabled = true;
          monthlyPaymentInput.classList.add('bg-gray-100');
          monthlyPaymentInput.classList.remove('bg-white');
          updateMinPayment();
        }
      });

      fixedPaymentRadio.addEventListener('change', function() {
        if (this.checked) {
          monthlyPaymentInput.disabled = false;
          monthlyPaymentInput.classList.remove('bg-gray-100');
          monthlyPaymentInput.classList.add('bg-white');
        }
      });

      // 更新最低还款额
      function updateMinPayment() {
        if (minPaymentRadio.checked) {
          const balance = parseFloat(balanceInput.value) || 0;
          const minPaymentRate = parseFloat(minPaymentRateInput.value) || 0;
          // 使用原始余额计算初始最低还款额
          const minPayment = Math.max(50, balance * (minPaymentRate / 100));
          monthlyPaymentInput.value = minPayment.toFixed(2);
          // 自动重新计算
          calculatePaymentPlan();
        }
      }

      // 初始计算
      calculatePaymentPlan();

      // 图表按钮切换事件
      document.querySelectorAll('.chart-btn').forEach(btn => {
        btn.addEventListener('click', function() {
          // 移除所有按钮的active状态
          document.querySelectorAll('.chart-btn').forEach(b => {
            b.classList.remove('active', 'bg-primary/10', 'text-primary');
            b.classList.add('bg-gray-100', 'text-gray-600');
          });

          // 添加当前按钮的active状态
          this.classList.add('active', 'bg-primary/10', 'text-primary');
          this.classList.remove('bg-gray-100', 'text-gray-600');

          // 根据按钮类型更新图表
          const chartType = this.textContent.trim();
          updateChart(chartType);
        });
      });

      // 计算还款计划 - V2版本修复了最后一个月还款金额问题
      function calculatePaymentPlan() {
        // 获取输入值
        const balance = parseFloat(balanceInput.value) || 0;
        const apr = parseFloat(aprInput.value) || 0;
        const minPaymentRate = parseFloat(minPaymentRateInput.value) || 0;
        let monthlyPayment = parseFloat(monthlyPaymentInput.value) || 0;

        // 验证输入
        if (balance <= 0 || apr <= 0 || minPaymentRate <= 0) {
          alert('请输入有效的信用卡余额、年利率和最低还款比例。');
          return;
        }

        // 计算月利率
        const monthlyRate = apr / 100 / 12;

        // 初始化变量
        let remainingBalance = balance;
        let totalInterest = 0;
        let months = 0;
        const paymentSchedule = [];

        // 计算还款计划
        while (remainingBalance > 0 && months < 120) { // 设置最大月份限制为10年
          months++;

          // 根据当前剩余余额计算最低还款额
          const currentMinPayment = Math.max(50, remainingBalance * (minPaymentRate / 100));

          // 根据还款方式选择还款金额
          let paymentAmount;
          if (fixedPaymentRadio.checked) {
            // 固定还款方式下，最后一个月调整还款金额
            const interestPayment = remainingBalance * monthlyRate;
            paymentAmount = (remainingBalance + interestPayment < monthlyPayment)
              ? remainingBalance + interestPayment
              : monthlyPayment;
          } else {
            // 最低还款方式
            paymentAmount = currentMinPayment;
          }

          // 确保还款额足够支付利息
          const interestPayment = remainingBalance * monthlyRate;
          if (paymentAmount < interestPayment) {
            alert('每月还款额必须大于当月利息');
            return;
          }

          totalInterest += interestPayment;

          // 计算本金还款和剩余余额
          const principalPayment = paymentAmount - interestPayment;
          remainingBalance -= principalPayment;

          // 如果剩余余额非常小，设为0
          if (remainingBalance < 0.01) {
            remainingBalance = 0;
          }

          // 记录还款计划
          paymentSchedule.push({
            month: months,
            beginningBalance: (months === 1) ? balance : paymentSchedule[months - 2].endingBalance,
            payment: paymentAmount,
            interest: interestPayment,
            principal: principalPayment,
            endingBalance: remainingBalance
          });

          // 如果是最后一个月，跳出循环
          if (remainingBalance <= 0) {
            break;
          }
        }

        // 计算总还款额
        const totalCost = balance + totalInterest;

        // 更新结果显示
        totalInterestElement.textContent = `¥${totalInterest.toFixed(2)}`;
        monthsToPayoffElement.textContent = `${months} 个月`;
        totalCostElement.textContent = `¥${totalCost.toFixed(2)}`;

        // 更新还款明细表
        updatePaymentSchedule(paymentSchedule);

        // 更新图表
        updateChart('余额');
      }

      // 更新还款明细表
      function updatePaymentSchedule(schedule) {
        // 清空现有内容
        paymentScheduleElement.innerHTML = '';

        // 最多显示10行，其余用省略号表示
        const displayMonths = Math.min(schedule.length, 10);

        for (let i = 0; i < displayMonths; i++) {
          const payment = schedule[i];
          const row = document.createElement('tr');

          row.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm font-medium text-dark">${payment.month}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-600">¥${payment.beginningBalance.toFixed(2)}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-600">¥${payment.payment.toFixed(2)}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-warning">¥${payment.interest.toFixed(2)}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-success">¥${payment.principal.toFixed(2)}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm font-medium ${payment.endingBalance === 0 ? 'text-success' : 'text-gray-600'}">
                ¥${payment.endingBalance.toFixed(2)}
              </div>
            </td>
          `;

          paymentScheduleElement.appendChild(row);
        }

        // 如果有更多月份，添加省略号行
        if (schedule.length > displayMonths) {
          const row = document.createElement('tr');
          row.innerHTML = `
            <td colspan="6" class="px-6 py-4 text-center">
              <div class="text-sm text-gray-500">... 共 ${schedule.length} 个月 ...</div>
            </td>
          `;
          paymentScheduleElement.appendChild(row);
        }
      }

      // 更新图表
      function updateChart(chartType) {
        // 获取输入值
        const balance = parseFloat(balanceInput.value) || 0;
        const apr = parseFloat(aprInput.value) || 0;
        const minPaymentRate = parseFloat(minPaymentRateInput.value) || 0;
        let monthlyPayment = parseFloat(monthlyPaymentInput.value) || 0;

        // 如果选择最低还款方式，使用原始余额计算初始最低还款额
        if (minPaymentRadio.checked) {
          monthlyPayment = Math.max(50, balance * (minPaymentRate / 100));
        }

        // 计算月利率
        const monthlyRate = apr / 100 / 12;

        // 初始化变量
        let remainingBalance = balance;
        let months = 0;
        const maxMonths = 120; // 最大显示月份数

        // 准备图表数据
        const monthsData = [];
        const balanceData = [];
        const interestData = [];
        const principalData = [];

        // 计算图表数据
        while (remainingBalance > 0 && months < maxMonths) {
          months++;
          monthsData.push(months);

          // 计算当月利息
          const interestPayment = remainingBalance * monthlyRate;
          interestData.push(interestPayment);

          // 计算当前月的最低还款额
          const currentMinPayment = Math.max(50, remainingBalance * (minPaymentRate / 100));

          // 根据还款方式选择还款金额
          const paymentAmount = fixedPaymentRadio.checked
            ? monthlyPayment
            : currentMinPayment;

          // 确保还款额足够支付利息
          const principalPayment = paymentAmount - interestPayment;
          principalData.push(principalPayment);

          // 计算剩余余额
          remainingBalance -= principalPayment;

          // 如果剩余余额非常小，设为0
          if (remainingBalance < 0.01) {
            remainingBalance = 0;
          }

          balanceData.push(remainingBalance);
        }

        // 如果已有图表实例，销毁它
        if (paymentChart) {
          paymentChart.destroy();
        }

        // 获取图表上下文
        const ctx = document.getElementById('paymentChart').getContext('2d');

        // 根据图表类型设置数据
        let chartData;

        if (chartType === '余额') {
          chartData = {
            labels: monthsData,
            datasets: [{
              label: '剩余余额',
              data: balanceData,
              borderColor: '#165DFF',
              backgroundColor: 'rgba(22, 93, 255, 0.1)',
              borderWidth: 2,
              fill: true,
              tension: 0.2
            }]
          };
        } else if (chartType === '利息') {
          chartData = {
            labels: monthsData,
            datasets: [{
              label: '每月利息',
              data: interestData,
              borderColor: '#FF7D00',
              backgroundColor: 'rgba(255, 125, 0, 0.1)',
              borderWidth: 2,
              fill: true,
              tension: 0.2
            }]
          };
        } else if (chartType === '本金 vs 利息') {
          chartData = {
            labels: monthsData,
            datasets: [{
              label: '本金',
              data: principalData,
              borderColor: '#00B42A',
              backgroundColor: 'rgba(0, 180, 42, 0.2)',
              borderWidth: 2,
              fill: true,
              tension: 0.2
            }, {
              label: '利息',
              data: interestData,
              borderColor: '#FF7D00',
              backgroundColor: 'rgba(255, 125, 0, 0.2)',
              borderWidth: 2,
              fill: true,
              tension: 0.2
            }]
          };
        }

        // 创建图表配置
        const config = {
          type: 'line',
          data: chartData,
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                position: 'top',
              },
              tooltip: {
                mode: 'index',
                intersect: false,
                callbacks: {
                  label: function(context) {
                    let label = context.dataset.label || '';
                    if (label) {
                      label += ': ';
                    }
                    if (context.parsed.y !== null) {
                      label += new Intl.NumberFormat('zh-CN', {
                        style: 'currency',
                        currency: 'CNY',
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                      }).format(context.parsed.y);
                    }
                    return label;
                  }
                }
              }
            },
            scales: {
              x: {
                title: {
                  display: true,
                  text: '月份'
                }
              },
              y: {
                beginAtZero: chartType === '本金 vs 利息' ? true : false,
                ticks: {
                  callback: function(value) {
                    return '¥' + value.toFixed(0);
                  }
                }
              }
            },
            interaction: {
              mode: 'nearest',
              axis: 'x',
              intersect: false
            },
            animations: {
              tension: {
                duration: 1000,
                easing: 'linear'
              }
            }
          }
        };

        // 创建图表
        paymentChart = new Chart(ctx, config);
      }
    });
  </script>
</body>
</html>